<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        .tabstyle {
            color: blue;
        }
    </style>

</head>

<body>
    <div>
        <h4>动态组件理解：</h4>
        <ul>
            <li>通过使用保留的 component 元素，将子组件动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换显示</li>
            <li>在挂载点component标签内使用v-bind:is='组件名(变量)'，vue根据is绑定的组件名去自动匹配要显示的组件，改变要显示的组件，只需修改is的值即可</li>
            <li>动态切换掉的组件（非当前显示的组件）是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染为此可以添加一个 keep-alive
                <br/>指令需要注意的是component 中可以添加id 但是不能添加class</li>
        </ul>
    </div>
    <div id='app6'>
        <h4>实例1：</h4>
        <button v-on:click="handleChangeView('1')">切换到 A</button>
        <button v-on:click="handleChangeView('2')">切换到 B</button>
        <button v-on:click="handleChangeView('3')">切换到 C</button>
        <component :is='currentView'></component>
        <pre>
    示例说明：
    1、在实例app6内通过component元素动态的将3个子组件3个子组件（t6-1、t6-2、t6-3）绑定到它的is特性上（:is="currentView"）
    2、点击父实例的tab按钮，会自动切换显示某一个子组件（根据currentView这个变量的值来决定）
    3、this.currentView = 'child-componet' + value意思是当前要显示的子组件名
    &lt;div id=&#x27;app6&#x27;&gt;
        &lt;button v-on:click=&quot;handleChangeView(&#x27;1&#x27;)&quot;&gt;切换到 A&lt;/button&gt;
        &lt;button v-on:click=&quot;handleChangeView(&#x27;2&#x27;)&quot;&gt;切换到 B&lt;/button&gt;
        &lt;button v-on:click=&quot;handleChangeView(&#x27;3&#x27;)&quot;&gt;切换到 C&lt;/button&gt;
        &lt;component :is=&#x27;currentView&#x27;&gt;&lt;/component&gt;
    &lt;/div&gt;
    &lt;template id=&quot;t6-1&quot;&gt;
        &lt;div&gt;A&lt;/div&gt;
    &lt;/template&gt;
    &lt;template id=&quot;t6-2&quot;&gt;
        &lt;div&gt;B&lt;/div&gt;
    &lt;/template&gt;
    &lt;template id=&quot;t6-3&quot;&gt;
        &lt;div&gt;C&lt;/div&gt;
    &lt;/template&gt;
    var app6 = new Vue({
        el: &#x27;#app6&#x27;,
        data: {
            currentView: &#x27;child-componet1&#x27;
        },
        components: {
            &#x27;child-componet1&#x27;: {
                template: &#x27;#t6-1&#x27;
            },
            &#x27;child-componet2&#x27;: {
                template: &#x27;#t6-2&#x27;
            },
            &#x27;child-componet3&#x27;: {
                template: &#x27;#t6-3&#x27;
            }
        },
        methods: {
            handleChangeView: function (value) {
                this.currentView = &#x27;child-componet&#x27; + value
            }
        }
    })
    </pre>
    </div>
    <template id="t6-1">
        <div>A</div>
    </template>
    <template id="t6-2">
        <div>B</div>
    </template>
    <template id="t6-3">
        <div>C</div>
    </template>
    <div id="app7">
        <h4>实例2：</h4>
        <button v-on:click="changeShow">change show</button>
        <component v-bind:is="show"></component>
    </div>
    <template id="t7-1">
        <div>1</div>
    </template>
    <template id="t7-2">
        <div>2</div>
    </template>
    <template id="t7-3">
        <div>3</div>
    </template>
    <!--  -->
    <div id="app8">
        <h4>实例3：</h4>
        <button type="button" v-for='(tab,index) in tabsname' v-bind:class='{tabstyle:index === tabclass_num}' v-on:click='myclick(index)'>{{tab}}</button>
        <component v-bind:is="show"></component>
    </div>
    <template id="t8-1">
        <div>movie</div>
    </template>
    <template id="t8-2">
        <div>music</div>
    </template>
    <template id="t8-3">
        <div>game</div>
    </template>
    <pre>
    示例说明：
    1、思路同示例6，只不过示例8的tab标签是通过v-for生成的
    2、下来不同点是，在实例data内有两个数组，一个保存所有的子组件名，一个保存所有的tab标签名，并且需保证两个数组顺序对应（每个组件名对应一个标签名）
    </pre>
    <script>
        var app6 = new Vue({
            el: '#app6',
            data: {
                currentView: 'child-componet1'
            },
            components: {
                'child-componet1': {
                    template: '#t6-1'
                },
                'child-componet2': {
                    template: '#t6-2'
                },
                'child-componet3': {
                    template: '#t6-3'
                }
            },
            methods: {
                handleChangeView: function (value) {
                    this.currentView = 'child-componet' + value
                }
            }
        })
        ///////////////////////
        var app7 = new Vue({
            el: '#app7',
            data: {
                show: 'child-componet1'
            },
            components: {
                'child-componet1': {
                    template: '#t7-1'
                },
                'child-componet2': {
                    template: '#t7-2'
                },
                'child-componet3': {
                    template: '#t7-3'
                }
            },
            methods: {
                changeShow: function () {
                    if (this.show == 'child-componet1') {
                        this.show = 'child-componet2'
                    } else if (this.show == 'child-componet2') {
                        this.show = 'child-componet3'
                    } else {
                        this.show = 'child-componet1'
                    }

                }
            }
        })
        var app8 = new Vue({
            el: '#app8',
            data: {
                show: 'tab-componet0',
                tabclass_num: 0,
                lists: ['tab-componet0', 'tab-componet1', 'tab-componet2'],//子组件名
                tabsname: ['电影专栏', '音乐专栏', '游戏专栏']//tab标签名

            },
            methods: {
                myclick: function (index) {
                    this.show = 'tab-componet' + index
                    this.tabclass_num = index
                }
            },
            components: {
                'tab-componet0': {
                    template: '#t8-1'
                },
                'tab-componet1': {
                    template: '#t8-2'
                },
                'tab-componet2': {
                    template: '#t8-3'
                }
            }
        })


    </script>
</body>

</html>